{extend name="common@base/common" /}

{block name="style"}
<link href="__CSS__/main.min.css" rel="stylesheet" type="text/css"/>
{/block}

{block name="body"}
<div class="container">
  <ol class="breadcrumb">
      <li><a href="{:url('index/index')}">演示首页</a></li>
      <li>评论</li>
  </ol>
<section class="demo-section">
<div id="pageContent">

<article><p>评论视图用于展示评论消息，评论列表允许进行嵌套。</p></article>





<section><header><h3>结构</h3></header><article><p>评论视图使用 <code>.comments</code> 作为父级容器，并使用如下特殊类标记子容器：</p><div class="table-responsive"><table class="table">
  <tbody>
    <tr>
      <td style="width: 150px"><code>&lt;header&gt;</code></td>
      <td style="width: 80px">头部</td>
      <td>标题等信息</td>
    </tr>
    <tr>
      <td><code>.comments-list</code></td>
      <td>列表项组</td>
      <td><code>.comments-list</code> 也可以嵌套放入 <code>.comment</code> 内。</td>
    </tr>
    <tr>
      <td><code>&lt;footer&gt;</code></td>
      <td>底部</td>
      <td>显示评论表达及分页信息等。</td>
    </tr>
  </tbody>
</table></div><p>一般 HTML 结构如下：</p><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"comments"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;header&gt;</span><span class="pln">
    </span><span class="tag">&lt;h1&gt;</span><span class="pln">所有评论</span><span class="tag">&lt;/h1&gt;</span><span class="pln">
  </span><span class="tag">&lt;/header&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"comments-list"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"comment"</span><span class="tag">&gt;</span><span class="pln">
      ...
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
    ...
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;footer&gt;</span><span class="pln">
    </span><span class="tag">&lt;form</span><span class="pln"> </span><span class="atn">action</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">
      ...
    </span><span class="tag">&lt;/form&gt;</span><span class="pln">
  </span><span class="tag">&lt;/footer&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre></article></section>























<section><header><h3>评论条目</h3></header><article><p>评论条目使用 <code>.comment</code> 类标识。在评论条目内可以使用如下特殊类：</p><ul>
<li><code>.avatar</code>，可选，用于包含一张图片作为发表评论的用户头像；</li>
<li><code>.content</code>，用于包含评论内容的容器；</li>
<li><code>.text</code>，用于包裹评论正文内容的容器，作为 <code>.content</code> 的直接子元素；</li>
<li><code>.actions</code>，用于包裹评论操作按钮或链接，作为 <code>.content</code> 的直接子元素；</li>
<li><code>.comments-list</code>，为该条评论嵌套一个新的评论列表，一般用于显示用户回复的评论条目。</li>
</ul><h4>一般形式</h4><p>包含用户头像、用户名称、操作链接、发布时间等。</p><div class="example">
  <div class="comment">
    <a href="###" class="avatar">
      <i class="icon-user icon-2x"></i>
    </a>
    <div class="content">
      <div class="pull-right text-muted">2 个小时前</div>
      <div><a href="###"><strong>Catouse</strong></a> <span class="text-muted">回复</span> <a href="###">张士超</a></div>
      <div class="text">你到底把我家钥匙放哪里了...</div>
      <div class="actions">
        <a href="##">回复</a>
        <a href="##">编辑</a>
        <a href="##">删除</a>
      </div>
    </div>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"comment"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"avatar"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-user icon-2x"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln">
  </span><span class="tag">&lt;/a&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"content"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pull-right text-muted"</span><span class="tag">&gt;</span><span class="pln">2 个小时前</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;&lt;strong&gt;</span><span class="pln">Catouse</span><span class="tag">&lt;/strong&gt;&lt;/a&gt;</span><span class="pln"> </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text-muted"</span><span class="tag">&gt;</span><span class="pln">回复</span><span class="tag">&lt;/span&gt;</span><span class="pln"> </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">张士超</span><span class="tag">&lt;/a&gt;&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text"</span><span class="tag">&gt;</span><span class="pln">你到底把我家钥匙放哪里了...</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"actions"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"##"</span><span class="tag">&gt;</span><span class="pln">回复</span><span class="tag">&lt;/a&gt;</span><span class="pln">
      </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"##"</span><span class="tag">&gt;</span><span class="pln">编辑</span><span class="tag">&lt;/a&gt;</span><span class="pln">
      </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"##"</span><span class="tag">&gt;</span><span class="pln">删除</span><span class="tag">&lt;/a&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre><div class="alert alert-primary-inverse">
  <h4>自定义头像</h4>
  <p>文档内使用图标作为头像内容仅仅作为演示，并非 ZUI 提供，你需要在 .avatar 内包含一张图片用作头像内容。</p>
</div><h4>不包含头像</h4><p>直接移除 <code>.avatar</code> 元素即可。</p><div class="example">
  <div class="comment">
    <div class="content">
      <div class="pull-right text-muted">2 个小时前</div>
      <div><a href="###"><strong>Catouse</strong></a> <span class="text-muted">回复</span> <a href="###">张士超</a></div>
      <div class="text">你到底把我家钥匙放哪里了...</div>
      <div class="actions">
        <a href="##">回复</a>
        <a href="##">编辑</a>
        <a href="##">删除</a>
      </div>
    </div>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"comment"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"content"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pull-right text-muted"</span><span class="tag">&gt;</span><span class="pln">2 个小时前</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;&lt;strong&gt;</span><span class="pln">Catouse</span><span class="tag">&lt;/strong&gt;&lt;/a&gt;</span><span class="pln"> </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text-muted"</span><span class="tag">&gt;</span><span class="pln">回复</span><span class="tag">&lt;/span&gt;</span><span class="pln"> </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">张士超</span><span class="tag">&lt;/a&gt;&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text"</span><span class="tag">&gt;</span><span class="pln">你到底把我家钥匙放哪里了...</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"actions"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"##"</span><span class="tag">&gt;</span><span class="pln">回复</span><span class="tag">&lt;/a&gt;</span><span class="pln">
      </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"##"</span><span class="tag">&gt;</span><span class="pln">编辑</span><span class="tag">&lt;/a&gt;</span><span class="pln">
      </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"##"</span><span class="tag">&gt;</span><span class="pln">删除</span><span class="tag">&lt;/a&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre><h4>嵌套评论列表</h4><p>在 <code>.comment</code> 内直接包含一个新的 <code>.comments-list</code> 即可。</p><div class="example">
  <div class="comment">
    <a href="###" class="avatar">
      <i class="icon-camera-retro icon-2x"></i>
    </a>
    <div class="content">
      <div class="pull-right text-muted">3 个小时前</div>
      <div><a href="###"><strong>张士超</strong></a></div>
      <div class="text">今天玩的真开心！<del>~</del>~</div>
      <div class="actions">
        <a href="##">回复</a>
      </div>
    </div>
    <div class="comments-list">
      <div class="comment">
        <a href="###" class="avatar">
          <i class="icon-user icon-2x"></i>
        </a>
        <div class="content">
          <div class="pull-right text-muted">2 个小时前</div>
          <div><a href="###"><strong>Catouse</strong></a> <span class="text-muted">回复</span> <a href="###">张士超</a></div>
          <div class="text">你到底把我家钥匙放哪里了...</div>
          <div class="actions">
            <a href="##">回复</a>
            <a href="##">编辑</a>
            <a href="##">删除</a>
          </div>
        </div>
        <div class="comments-list">
          <div class="comment">
            <a href="###" class="avatar">
              <i class="icon-yinyang icon-2x"></i>
            </a>
            <div class="content">
              <div class="pull-right text-muted">1 个小时前</div>
              <div><a href="###"><strong>门口大爷</strong></a> <span class="text-muted">回复</span> <a href="###">Catouse</a></div>
              <div class="text">不在我这儿...</div>
              <div class="actions">
                <a href="##">回复</a>
              </div>
            </div>
          </div>
          <div class="comment">
            <a href="###" class="avatar">
              <i class="icon-cube-alt icon-2x"></i>
            </a>
            <div class="content">
              <div class="pull-right text-muted">1 个小时前</div>
              <div><a href="###"><strong>队长</strong></a> <span class="text-muted">回复</span> <a href="###">Catouse</a></div>
              <div class="text">也不在我这儿...</div>
              <div class="actions">
                <a href="##">回复</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="comment">
        <a href="###" class="avatar">
          <i class="icon-heart-empty icon-2x"></i>
        </a>
        <div class="content">
          <div class="pull-right text-muted">30 分钟前</div>
          <div><a href="###"><strong>华师大第一美女</strong></a> <span class="text-muted">回复</span> <a href="###">张士超</a></div>
          <div class="text">很开心~~~</div>
          <div class="actions">
            <a href="##">回复</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div><pre class="pre-scrollable linenums prettyprint prettyprinted" style=""><ol class="linenums"><li class="L0"><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"comment"</span><span class="tag">&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"avatar"</span><span class="tag">&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-camera-retro icon-2x"</span><span class="tag">&gt;&lt;/i&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;/a&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"content"</span><span class="tag">&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pull-right text-muted"</span><span class="tag">&gt;</span><span class="pln">3 个小时前</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L6"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;div&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;&lt;strong&gt;</span><span class="pln">张士超</span><span class="tag">&lt;/strong&gt;&lt;/a&gt;&lt;/div&gt;</span></code></li><li class="L7"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text"</span><span class="tag">&gt;</span><span class="pln">今天玩的真开心！~~~~~~</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L8"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"actions"</span><span class="tag">&gt;</span></code></li><li class="L9"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"##"</span><span class="tag">&gt;</span><span class="pln">回复</span><span class="tag">&lt;/a&gt;</span></code></li><li class="L0"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"comments-list"</span><span class="tag">&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"comment"</span><span class="tag">&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"avatar"</span><span class="tag">&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-user icon-2x"</span><span class="tag">&gt;&lt;/i&gt;</span></code></li><li class="L6"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;/a&gt;</span></code></li><li class="L7"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"content"</span><span class="tag">&gt;</span></code></li><li class="L8"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pull-right text-muted"</span><span class="tag">&gt;</span><span class="pln">2 个小时前</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L9"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;div&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;&lt;strong&gt;</span><span class="pln">Catouse</span><span class="tag">&lt;/strong&gt;&lt;/a&gt;</span><span class="pln"> </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text-muted"</span><span class="tag">&gt;</span><span class="pln">回复</span><span class="tag">&lt;/span&gt;</span><span class="pln"> </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">张士超</span><span class="tag">&lt;/a&gt;&lt;/div&gt;</span></code></li><li class="L0"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text"</span><span class="tag">&gt;</span><span class="pln">你到底把我家钥匙放哪里了...</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"actions"</span><span class="tag">&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">          </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"##"</span><span class="tag">&gt;</span><span class="pln">回复</span><span class="tag">&lt;/a&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">          </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"##"</span><span class="tag">&gt;</span><span class="pln">编辑</span><span class="tag">&lt;/a&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">          </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"##"</span><span class="tag">&gt;</span><span class="pln">删除</span><span class="tag">&lt;/a&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L6"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L7"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"comments-list"</span><span class="tag">&gt;</span></code></li><li class="L8"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"comment"</span><span class="tag">&gt;</span></code></li><li class="L9"><code class="lang-html"><span class="pln">          </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"avatar"</span><span class="tag">&gt;</span></code></li><li class="L0"><code class="lang-html"><span class="pln">            </span><span class="tag">&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-yinyang icon-2x"</span><span class="tag">&gt;&lt;/i&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">          </span><span class="tag">&lt;/a&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">          </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"content"</span><span class="tag">&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">            </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pull-right text-muted"</span><span class="tag">&gt;</span><span class="pln">1 个小时前</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">            </span><span class="tag">&lt;div&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;&lt;strong&gt;</span><span class="pln">门口大爷</span><span class="tag">&lt;/strong&gt;&lt;/a&gt;</span><span class="pln"> </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text-muted"</span><span class="tag">&gt;</span><span class="pln">回复</span><span class="tag">&lt;/span&gt;</span><span class="pln"> </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">Catouse</span><span class="tag">&lt;/a&gt;&lt;/div&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="pln">            </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text"</span><span class="tag">&gt;</span><span class="pln">不在我这儿...</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L6"><code class="lang-html"><span class="pln">            </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"actions"</span><span class="tag">&gt;</span></code></li><li class="L7"><code class="lang-html"><span class="pln">              </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"##"</span><span class="tag">&gt;</span><span class="pln">回复</span><span class="tag">&lt;/a&gt;</span></code></li><li class="L8"><code class="lang-html"><span class="pln">            </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L9"><code class="lang-html"><span class="pln">          </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L0"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"comment"</span><span class="tag">&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">          </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"avatar"</span><span class="tag">&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">            </span><span class="tag">&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-cube-alt icon-2x"</span><span class="tag">&gt;&lt;/i&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">          </span><span class="tag">&lt;/a&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="pln">          </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"content"</span><span class="tag">&gt;</span></code></li><li class="L6"><code class="lang-html"><span class="pln">            </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pull-right text-muted"</span><span class="tag">&gt;</span><span class="pln">1 个小时前</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L7"><code class="lang-html"><span class="pln">            </span><span class="tag">&lt;div&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;&lt;strong&gt;</span><span class="pln">队长</span><span class="tag">&lt;/strong&gt;&lt;/a&gt;</span><span class="pln"> </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text-muted"</span><span class="tag">&gt;</span><span class="pln">回复</span><span class="tag">&lt;/span&gt;</span><span class="pln"> </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">Catouse</span><span class="tag">&lt;/a&gt;&lt;/div&gt;</span></code></li><li class="L8"><code class="lang-html"><span class="pln">            </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text"</span><span class="tag">&gt;</span><span class="pln">也不在我这儿...</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L9"><code class="lang-html"><span class="pln">            </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"actions"</span><span class="tag">&gt;</span></code></li><li class="L0"><code class="lang-html"><span class="pln">              </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"##"</span><span class="tag">&gt;</span><span class="pln">回复</span><span class="tag">&lt;/a&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">            </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">          </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L6"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"comment"</span><span class="tag">&gt;</span></code></li><li class="L7"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"avatar"</span><span class="tag">&gt;</span></code></li><li class="L8"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-heart-empty icon-2x"</span><span class="tag">&gt;&lt;/i&gt;</span></code></li><li class="L9"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;/a&gt;</span></code></li><li class="L0"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"content"</span><span class="tag">&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pull-right text-muted"</span><span class="tag">&gt;</span><span class="pln">30 分钟前</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;div&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;&lt;strong&gt;</span><span class="pln">华师大第一美女</span><span class="tag">&lt;/strong&gt;&lt;/a&gt;</span><span class="pln"> </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text-muted"</span><span class="tag">&gt;</span><span class="pln">回复</span><span class="tag">&lt;/span&gt;</span><span class="pln"> </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">张士超</span><span class="tag">&lt;/a&gt;&lt;/div&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text"</span><span class="tag">&gt;</span><span class="pln">很开心~~~</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"actions"</span><span class="tag">&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="pln">          </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"##"</span><span class="tag">&gt;</span><span class="pln">回复</span><span class="tag">&lt;/a&gt;</span></code></li><li class="L6"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L7"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L8"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L9"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L0"><code class="lang-html"><span class="tag">&lt;/div&gt;</span></code></li></ol></pre><div class="alert alert-primary-inverse">
  <h4>限制嵌套层次</h4>
  <p>虽然你可以无限的嵌套评论列表，但受限于视窗大小和便于用户阅读，不应该使用超过 3 个层级的嵌套。</p>
</div></article></section>






<section><header><h3>评论表单</h3></header><article><p>评论表单通常放置在 <code>&lt;footer&gt;</code> 内。在 <code>&lt;form&gt;</code> 上添加 <code>.reply-form</code> 类来获得外观一致性的评论表单。</p><div class="example">
  <div class="comments">
    <section class="comments-list">
      <div class="comment">
        <a href="###" class="avatar">
          <i class="icon-user icon-2x"></i>
        </a>
        <div class="content">
          <div class="pull-right text-muted">2 个小时前</div>
          <div><a href="###"><strong>Catouse</strong></a> <span class="text-muted">回复</span> <a href="###">张士超</a></div>
          <div class="text">你到底把我家钥匙放哪里了...</div>
          <div class="actions">
            <a href="##">回复</a>
            <a href="##">编辑</a>
            <a href="##">删除</a>
          </div>
        </div>
      </div>
    </section>
    <footer>
      <div class="reply-form" id="commentReplyForm1">
        <a href="###" class="avatar"><i class="icon-user icon-2x"></i></a>
        <form class="form">
          <div class="form-group">
            <textarea class="form-control new-comment-text" rows="2" placeholder="撰写评论..."></textarea>
          </div>
          <div class="form-group comment-user">
            <div class="row">
              <div class="col-md-3">
                <span class="pull-right">或者</span>
                <a href="#">登录</a> &nbsp;<a href="##">注册</a>
              </div>
              <div class="col-md-7">
                <div class="form-group">
                  <input type="text" class="form-control" id="nameInputEmail1" placeholder="输入评论显示名称">
                </div>
                <div class="form-group">
                  <input type="email" class="form-control" id="exampleInputEmail1" placeholder="输入电子邮件（不会在评论显示）">
                </div>
              </div>
              <div class="col-md-2"><button type="submit" class="btn btn-block btn-primary"><i class="icon-ok"></i></button></div>
            </div>
          </div>
        </form>
      </div>
    </footer>
  </div>
</div><pre class="pre-scrollable linenums prettyprint prettyprinted" style=""><ol class="linenums"><li class="L0"><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"comments"</span><span class="tag">&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;section</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"comments-list"</span><span class="tag">&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"comment"</span><span class="tag">&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"avatar"</span><span class="tag">&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-user icon-2x"</span><span class="tag">&gt;&lt;/i&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;/a&gt;</span></code></li><li class="L6"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"content"</span><span class="tag">&gt;</span></code></li><li class="L7"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pull-right text-muted"</span><span class="tag">&gt;</span><span class="pln">2 个小时前</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L8"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;div&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;&lt;strong&gt;</span><span class="pln">Catouse</span><span class="tag">&lt;/strong&gt;&lt;/a&gt;</span><span class="pln"> </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text-muted"</span><span class="tag">&gt;</span><span class="pln">回复</span><span class="tag">&lt;/span&gt;</span><span class="pln"> </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">张士超</span><span class="tag">&lt;/a&gt;&lt;/div&gt;</span></code></li><li class="L9"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text"</span><span class="tag">&gt;</span><span class="pln">你到底把我家钥匙放哪里了...</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L0"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"actions"</span><span class="tag">&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">          </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"##"</span><span class="tag">&gt;</span><span class="pln">回复</span><span class="tag">&lt;/a&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">          </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"##"</span><span class="tag">&gt;</span><span class="pln">编辑</span><span class="tag">&lt;/a&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">          </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"##"</span><span class="tag">&gt;</span><span class="pln">删除</span><span class="tag">&lt;/a&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L6"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L7"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;/section&gt;</span></code></li><li class="L8"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;footer&gt;</span></code></li><li class="L9"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"reply-form"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"commentReplyForm1"</span><span class="tag">&gt;</span></code></li><li class="L0"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"avatar"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-user icon-2x"</span><span class="tag">&gt;&lt;/i&gt;&lt;/a&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;form</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form"</span><span class="tag">&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">          </span><span class="tag">&lt;textarea</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control new-comment-text"</span><span class="pln"> </span><span class="atn">rows</span><span class="pun">=</span><span class="atv">"2"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"撰写评论..."</span><span class="tag">&gt;&lt;/textarea&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group comment-user"</span><span class="tag">&gt;</span></code></li><li class="L6"><code class="lang-html"><span class="pln">          </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"row"</span><span class="tag">&gt;</span></code></li><li class="L7"><code class="lang-html"><span class="pln">            </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-md-3"</span><span class="tag">&gt;</span></code></li><li class="L8"><code class="lang-html"><span class="pln">              </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pull-right"</span><span class="tag">&gt;</span><span class="pln">或者</span><span class="tag">&lt;/span&gt;</span></code></li><li class="L9"><code class="lang-html"><span class="pln">              </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">登录</span><span class="tag">&lt;/a&gt;</span><span class="pln"> &amp;nbsp;</span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"##"</span><span class="tag">&gt;</span><span class="pln">注册</span><span class="tag">&lt;/a&gt;</span></code></li><li class="L0"><code class="lang-html"><span class="pln">            </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">            </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-md-7"</span><span class="tag">&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">              </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">                </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"nameInputEmail1"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"输入评论显示名称"</span><span class="tag">&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">              </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="pln">              </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span></code></li><li class="L6"><code class="lang-html"><span class="pln">                </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"email"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"exampleInputEmail1"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"输入电子邮件（不会在评论显示）"</span><span class="tag">&gt;</span></code></li><li class="L7"><code class="lang-html"><span class="pln">              </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L8"><code class="lang-html"><span class="pln">            </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L9"><code class="lang-html"><span class="pln">            </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-md-2"</span><span class="tag">&gt;&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"submit"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-block btn-primary"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-ok"</span><span class="tag">&gt;&lt;/i&gt;&lt;/button&gt;&lt;/div&gt;</span></code></li><li class="L0"><code class="lang-html"><span class="pln">          </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;/form&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;/footer&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="tag">&lt;/div&gt;</span></code></li></ol></pre></article></section>




<section><header><h3>综合示例</h3></header><article><div style="padding-bottom: 0" class="example">
  <div class="comments">
    <header>
      <div class="pull-right"><a href="#commentReplyForm2" class="btn btn-primary"><i class="icon-comment-alt"></i> 发表评论</a></div>
      <h3>所有评论</h3>
    </header>
    <section class="comments-list">
      <div class="comment">
        <a href="###" class="avatar">
          <i class="icon-camera-retro icon-2x"></i>
        </a>
        <div class="content">
          <div class="pull-right text-muted">3 个小时前</div>
          <div><a href="###"><strong>张士超</strong></a></div>
          <div class="text">今天玩的真开心！<del>~</del>~</div>
          <div class="actions">
            <a href="##">回复</a>
          </div>
        </div>
        <div class="comments-list">
          <div class="comment">
            <a href="###" class="avatar">
              <i class="icon-user icon-2x"></i>
            </a>
            <div class="content">
              <div class="pull-right text-muted">2 个小时前</div>
              <div><a href="###"><strong>Catouse</strong></a> <span class="text-muted">回复</span> <a href="###">张士超</a></div>
              <div class="text">你到底把我家钥匙放哪里了...</div>
              <div class="actions">
                <a href="##">回复</a>
                <a href="##">编辑</a>
                <a href="##">删除</a>
              </div>
            </div>
            <div class="comments-list">
              <div class="comment">
                <a href="###" class="avatar">
                  <i class="icon-yinyang icon-2x"></i>
                </a>
                <div class="content">
                  <div class="pull-right text-muted">1 个小时前</div>
                  <div><a href="###"><strong>门口大爷</strong></a> <span class="text-muted">回复</span> <a href="###">Catouse</a></div>
                  <div class="text">不在我这儿...</div>
                  <div class="actions">
                    <a href="##">回复</a>
                  </div>
                </div>
              </div>
              <div class="comment">
                <a href="###" class="avatar">
                  <i class="icon-cube-alt icon-2x"></i>
                </a>
                <div class="content">
                  <div class="pull-right text-muted">1 个小时前</div>
                  <div><a href="###"><strong>队长</strong></a> <span class="text-muted">回复</span> <a href="###">Catouse</a></div>
                  <div class="text">也不在我这儿...</div>
                  <div class="actions">
                    <a href="##">回复</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="comment">
            <a href="###" class="avatar">
              <i class="icon-heart-empty icon-2x"></i>
            </a>
            <div class="content">
              <div class="pull-right text-muted">30 分钟前</div>
              <div><a href="###"><strong>华师大第一美女</strong></a> <span class="text-muted">回复</span> <a href="###">张士超</a></div>
              <div class="text">很开心~~~</div>
              <div class="actions">
                <a href="##">回复</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <footer>
      <div class="reply-form" id="commentReplyForm2">
        <a href="###" class="avatar"><i class="icon-user icon-2x"></i></a>
        <form class="form">
          <div class="form-group">
            <textarea class="form-control new-comment-text" rows="2" placeholder="撰写评论..."></textarea>
          </div>
          <div class="form-group comment-user">
            <div class="row">
              <div class="col-md-3">
                <span class="pull-right">或者</span>
                <a href="#">登录</a> &nbsp;<a href="##">注册</a>
              </div>
              <div class="col-md-7">
                <div class="form-group">
                  <input type="text" class="form-control" id="nameInputEmail1" placeholder="输入评论显示名称">
                </div>
                <div class="form-group">
                  <input type="email" class="form-control" id="exampleInputEmail1" placeholder="输入电子邮件（不会在评论显示）">
                </div>
              </div>
              <div class="col-md-2"><button type="submit" class="btn btn-block btn-primary"><i class="icon-ok"></i></button></div>
            </div>
          </div>
        </form>
      </div>
    </footer>
  </div>
</div><pre class="pre-scrollable linenums prettyprint prettyprinted" style=""><ol class="linenums"><li class="L0"><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"comments"</span><span class="tag">&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;header&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pull-right"</span><span class="tag">&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#commentReplyForm2"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-primary"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-comment-alt"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln"> 发表评论</span><span class="tag">&lt;/a&gt;&lt;/div&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;h3&gt;</span><span class="pln">所有评论</span><span class="tag">&lt;/h3&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;/header&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;section</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"comments-list"</span><span class="tag">&gt;</span></code></li><li class="L6"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"comment"</span><span class="tag">&gt;</span></code></li><li class="L7"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"avatar"</span><span class="tag">&gt;</span></code></li><li class="L8"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-camera-retro icon-2x"</span><span class="tag">&gt;&lt;/i&gt;</span></code></li><li class="L9"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;/a&gt;</span></code></li><li class="L0"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"content"</span><span class="tag">&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pull-right text-muted"</span><span class="tag">&gt;</span><span class="pln">3 个小时前</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;div&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;&lt;strong&gt;</span><span class="pln">张士超</span><span class="tag">&lt;/strong&gt;&lt;/a&gt;&lt;/div&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text"</span><span class="tag">&gt;</span><span class="pln">今天玩的真开心！~~~~~~</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"actions"</span><span class="tag">&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="pln">          </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"##"</span><span class="tag">&gt;</span><span class="pln">回复</span><span class="tag">&lt;/a&gt;</span></code></li><li class="L6"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L7"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L8"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"comments-list"</span><span class="tag">&gt;</span></code></li><li class="L9"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"comment"</span><span class="tag">&gt;</span></code></li><li class="L0"><code class="lang-html"><span class="pln">          </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"avatar"</span><span class="tag">&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">            </span><span class="tag">&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-user icon-2x"</span><span class="tag">&gt;&lt;/i&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">          </span><span class="tag">&lt;/a&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">          </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"content"</span><span class="tag">&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">            </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pull-right text-muted"</span><span class="tag">&gt;</span><span class="pln">2 个小时前</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="pln">            </span><span class="tag">&lt;div&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;&lt;strong&gt;</span><span class="pln">Catouse</span><span class="tag">&lt;/strong&gt;&lt;/a&gt;</span><span class="pln"> </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text-muted"</span><span class="tag">&gt;</span><span class="pln">回复</span><span class="tag">&lt;/span&gt;</span><span class="pln"> </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">张士超</span><span class="tag">&lt;/a&gt;&lt;/div&gt;</span></code></li><li class="L6"><code class="lang-html"><span class="pln">            </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text"</span><span class="tag">&gt;</span><span class="pln">你到底把我家钥匙放哪里了...</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L7"><code class="lang-html"><span class="pln">            </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"actions"</span><span class="tag">&gt;</span></code></li><li class="L8"><code class="lang-html"><span class="pln">              </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"##"</span><span class="tag">&gt;</span><span class="pln">回复</span><span class="tag">&lt;/a&gt;</span></code></li><li class="L9"><code class="lang-html"><span class="pln">              </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"##"</span><span class="tag">&gt;</span><span class="pln">编辑</span><span class="tag">&lt;/a&gt;</span></code></li><li class="L0"><code class="lang-html"><span class="pln">              </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"##"</span><span class="tag">&gt;</span><span class="pln">删除</span><span class="tag">&lt;/a&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">            </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">          </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">          </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"comments-list"</span><span class="tag">&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">            </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"comment"</span><span class="tag">&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="pln">              </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"avatar"</span><span class="tag">&gt;</span></code></li><li class="L6"><code class="lang-html"><span class="pln">                </span><span class="tag">&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-yinyang icon-2x"</span><span class="tag">&gt;&lt;/i&gt;</span></code></li><li class="L7"><code class="lang-html"><span class="pln">              </span><span class="tag">&lt;/a&gt;</span></code></li><li class="L8"><code class="lang-html"><span class="pln">              </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"content"</span><span class="tag">&gt;</span></code></li><li class="L9"><code class="lang-html"><span class="pln">                </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pull-right text-muted"</span><span class="tag">&gt;</span><span class="pln">1 个小时前</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L0"><code class="lang-html"><span class="pln">                </span><span class="tag">&lt;div&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;&lt;strong&gt;</span><span class="pln">门口大爷</span><span class="tag">&lt;/strong&gt;&lt;/a&gt;</span><span class="pln"> </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text-muted"</span><span class="tag">&gt;</span><span class="pln">回复</span><span class="tag">&lt;/span&gt;</span><span class="pln"> </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">Catouse</span><span class="tag">&lt;/a&gt;&lt;/div&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">                </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text"</span><span class="tag">&gt;</span><span class="pln">不在我这儿...</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">                </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"actions"</span><span class="tag">&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">                  </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"##"</span><span class="tag">&gt;</span><span class="pln">回复</span><span class="tag">&lt;/a&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">                </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="pln">              </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L6"><code class="lang-html"><span class="pln">            </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L7"><code class="lang-html"><span class="pln">            </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"comment"</span><span class="tag">&gt;</span></code></li><li class="L8"><code class="lang-html"><span class="pln">              </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"avatar"</span><span class="tag">&gt;</span></code></li><li class="L9"><code class="lang-html"><span class="pln">                </span><span class="tag">&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-cube-alt icon-2x"</span><span class="tag">&gt;&lt;/i&gt;</span></code></li><li class="L0"><code class="lang-html"><span class="pln">              </span><span class="tag">&lt;/a&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">              </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"content"</span><span class="tag">&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">                </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pull-right text-muted"</span><span class="tag">&gt;</span><span class="pln">1 个小时前</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">                </span><span class="tag">&lt;div&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;&lt;strong&gt;</span><span class="pln">队长</span><span class="tag">&lt;/strong&gt;&lt;/a&gt;</span><span class="pln"> </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text-muted"</span><span class="tag">&gt;</span><span class="pln">回复</span><span class="tag">&lt;/span&gt;</span><span class="pln"> </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">Catouse</span><span class="tag">&lt;/a&gt;&lt;/div&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">                </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text"</span><span class="tag">&gt;</span><span class="pln">也不在我这儿...</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="pln">                </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"actions"</span><span class="tag">&gt;</span></code></li><li class="L6"><code class="lang-html"><span class="pln">                  </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"##"</span><span class="tag">&gt;</span><span class="pln">回复</span><span class="tag">&lt;/a&gt;</span></code></li><li class="L7"><code class="lang-html"><span class="pln">                </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L8"><code class="lang-html"><span class="pln">              </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L9"><code class="lang-html"><span class="pln">            </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L0"><code class="lang-html"><span class="pln">          </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"comment"</span><span class="tag">&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">          </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"avatar"</span><span class="tag">&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">            </span><span class="tag">&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-heart-empty icon-2x"</span><span class="tag">&gt;&lt;/i&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="pln">          </span><span class="tag">&lt;/a&gt;</span></code></li><li class="L6"><code class="lang-html"><span class="pln">          </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"content"</span><span class="tag">&gt;</span></code></li><li class="L7"><code class="lang-html"><span class="pln">            </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pull-right text-muted"</span><span class="tag">&gt;</span><span class="pln">30 分钟前</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L8"><code class="lang-html"><span class="pln">            </span><span class="tag">&lt;div&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;&lt;strong&gt;</span><span class="pln">华师大第一美女</span><span class="tag">&lt;/strong&gt;&lt;/a&gt;</span><span class="pln"> </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text-muted"</span><span class="tag">&gt;</span><span class="pln">回复</span><span class="tag">&lt;/span&gt;</span><span class="pln"> </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">张士超</span><span class="tag">&lt;/a&gt;&lt;/div&gt;</span></code></li><li class="L9"><code class="lang-html"><span class="pln">            </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text"</span><span class="tag">&gt;</span><span class="pln">很开心~~~</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L0"><code class="lang-html"><span class="pln">            </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"actions"</span><span class="tag">&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">              </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"##"</span><span class="tag">&gt;</span><span class="pln">回复</span><span class="tag">&lt;/a&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">            </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">          </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L6"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L7"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;/section&gt;</span></code></li><li class="L8"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;footer&gt;</span></code></li><li class="L9"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"reply-form"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"commentReplyForm2"</span><span class="tag">&gt;</span></code></li><li class="L0"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"avatar"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-user icon-2x"</span><span class="tag">&gt;&lt;/i&gt;&lt;/a&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;form</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form"</span><span class="tag">&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">          </span><span class="tag">&lt;textarea</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control new-comment-text"</span><span class="pln"> </span><span class="atn">rows</span><span class="pun">=</span><span class="atv">"2"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"撰写评论..."</span><span class="tag">&gt;&lt;/textarea&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group comment-user"</span><span class="tag">&gt;</span></code></li><li class="L6"><code class="lang-html"><span class="pln">          </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"row"</span><span class="tag">&gt;</span></code></li><li class="L7"><code class="lang-html"><span class="pln">            </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-md-3"</span><span class="tag">&gt;</span></code></li><li class="L8"><code class="lang-html"><span class="pln">              </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pull-right"</span><span class="tag">&gt;</span><span class="pln">或者</span><span class="tag">&lt;/span&gt;</span></code></li><li class="L9"><code class="lang-html"><span class="pln">              </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">登录</span><span class="tag">&lt;/a&gt;</span><span class="pln"> &amp;nbsp;</span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"##"</span><span class="tag">&gt;</span><span class="pln">注册</span><span class="tag">&lt;/a&gt;</span></code></li><li class="L0"><code class="lang-html"><span class="pln">            </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">            </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-md-7"</span><span class="tag">&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">              </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">                </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"nameInputEmail1"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"输入评论显示名称"</span><span class="tag">&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">              </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="pln">              </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span></code></li><li class="L6"><code class="lang-html"><span class="pln">                </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"email"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"exampleInputEmail1"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"输入电子邮件（不会在评论显示）"</span><span class="tag">&gt;</span></code></li><li class="L7"><code class="lang-html"><span class="pln">              </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L8"><code class="lang-html"><span class="pln">            </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L9"><code class="lang-html"><span class="pln">            </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-md-2"</span><span class="tag">&gt;&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"submit"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-block btn-primary"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-ok"</span><span class="tag">&gt;&lt;/i&gt;&lt;/button&gt;&lt;/div&gt;</span></code></li><li class="L0"><code class="lang-html"><span class="pln">          </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;/form&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;/footer&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="tag">&lt;/div&gt;</span></code></li></ol></pre></article></section></div>


</section>
{/block}